<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>用户管理</cite></a>
    <a><cite>渠道商列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_channel_search" id="filterForm">
        <script type="text/html" template lay-done="layui.data.done()">
          <div class="layui-inline">
            <div class="layui-form-label">关键字搜索</div>
            <div class="layui-input-inline">
              <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入渠道名称或负责人手机号">
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_channel_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_channel_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>

          <a id="btn_add_channel" class="layui-btn layui-btn-normal">
            <i class="layui-icon layui-icon-add-1"></i>创建渠道码
          </a>
        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_channel"></div>
      <script type="text/html" id="tpl_contact">
        {{d.contact}} ({{d.mobile}})
      </script>
      <script type="text/html" id="tpl_parent">
        {{# if (d.parent) { }}
        {{d.parent.uuid}}
        {{# } }}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-event="edit">
          <i class="layui-icon layui-icon-edit"></i>编辑
        </a>
        <div class="ant-divider"></div>
        <a class="layui-table-link" lay-event="target">
          查看指标
        </a>
        <div class="ant-divider"></div>
        <a class="layui-table-link" lay-event="export">
          报表导出
          <i lay-event="export" class="layui-icon layui-icon-down layui-font-12"></i>
        </a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.done = function () {
    layui.use(['fox_table', 'dropdown', 'laydate'], function () {
      let $ = layui.$
        , fox_table = layui.fox_table
        , admin = layui.admin
        , form = layui.form
        , view = layui.view
        , dropdown = layui.dropdown
        , laydate = layui.laydate
      //日期时间选择器
      laydate.render({
        elem: '#date_range'
        , range: ['#start_date', '#end_date']
        , max: (new Date()).toDateString()
      });
      ;

      let resourceUrl = 'agent-admin/channels'

      // 列表查询
      fox_table.render({
        id: 'table_channel'
        , url: resourceUrl
        , cols: [[
          {title: 'ID', field: 'id', width: 80, align: "center", sort: true}
          , {title: '上级渠道', templet: '#tpl_parent', width: 180}
          , {title: '渠道名称', field: 'name', width: 150}
          , {title: '渠道码', field: 'uuid', width: 180}
          , {title: '联系人', templet: '#tpl_contact', minWidth: 120}
          , {title: '操作', width: 300, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
        ]]
      });

      //监听操作栏
      fox_table.toolbar(function (obj) {
        let data = obj.data;
        var that = this
        if (obj.event === 'qrcode') {
          showQrcodeForm(data)
        } else if (obj.event === 'target') {
          showTargetForm(data)
        } else if (obj.event === 'edit') {
          showChannelForm(data)
        } else if (obj.event === 'export') {
          dropdown.render({
            elem: that //可绑定在任意元素中，此处以上述按钮为例
            , show: true
            , data: [{
              title: '下载渠道用户'
              , id: 'user_export'
              , href: 'javascript:void(0)'
            }, {
              title: '下载渠道订单'
              , id: 200
              , href: 'javascript:void(0)'
            }],
            trigger: 'click'
            , click: function (data, othis) {

              let params = $("#filterForm").serializeArray();
              objparam = {};
              for (var i in params) {
                objparam[params[i].name] = params[i].value;
              }

              objparam.channel_id = obj.data.id

              if (data.id === 'user_export') {
                admin.post('agent-admin/channel/userexport', objparam, function (res) {
                  layer.confirm('数据下载中，请到下载中心查看下载任务进度.', function (index) {
                    layer.close(index);
                    location.hash = '/ops/download';
                    return false;
                  });
                })
                return false;
              } else {

                admin.post('agent-admin/channel/orderexport', objparam, function (res) {
                  layer.confirm('数据下载中，请到下载中心查看下载任务进度.', function (index) {
                    layer.close(index);
                    location.hash = '/ops/download';
                    return false;
                  });
                })
                return false;
              }
            }
          });
        }
      });

      //搜索
      form.on('submit(submit_channel_search)', function (d) {
        fox_table.reload(d.field);
        return false;
      });
      //重置
      form.on('submit(reset_channel_search)', function (d) {
        $("input[name='keyword']").val('');
        $("input[name='start_date']").val('');
        $("input[name='end_date']").val('');
        fox_table.reload({});
        return false;
      });
      $('#btn_add_channel').click(function () {
        showChannelForm()
      })

      function showChannelForm(data) {
        data = data || {}
        let minWidth = '600px';
        let minHeight = '500px';
        admin.popup({
          title: '数据指标'
          , area: [minWidth, minHeight]
          , id: 'popup_channel_form'
          , success: function (layero, index) {
            view(this.id).render('/user/channel_form', data).done(function () {
              /* 监听提交 */
              form.on('submit(submit_channel)', function (data) {
                admin.post('agent-admin/channel/create', data.field, function (res) {
                  layer.close(index)
                  fox_table.reload()
                })
                return false;
              });
            })
          }
        })
      }

      function showTargetForm(data) {
        let minWidth = '800px';
        let minHeight = '350px';
        admin.popup({
          title: '数据指标'
          , area: [minWidth, minHeight]
          , id: 'popup_channel_target'
          , success: function (layero, index) {
            view(this.id).render('/user/channel_target', data).done(function () {
            })
          }
        })
      }
    })
  }
</script>

